<template>
  <div>
    <el-card :body-style="{padding: '10px'}">
      <el-row slot="header" type="flex" align="middle" justify="space-between">
        <div>
          <span class="my-iconfont-text1">门禁</span>
        </div>
        <div>
          <span>响应延时：</span>
          <span :class="delayClass">{{ delayMS }}</span>
        </div>
        <status-indicator :status="indicatorClass" :pulse="true" />
      </el-row>
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="10">
          <el-row type="flex" justify="center" align="middle">
            <i class="iconfont icon-doorhandle my-obj-icon" @click="eventChangePassWord" :disabled="changeDisable"/>
          </el-row>
          <el-row type="flex" justify="center" align="middle" style="margin-top: 10px;">
            <span style="font-size: 13px">门禁状态：</span>
            <el-tag @click="eventCloseDoor" :disabled="tagDisable" :type="tagType">
              {{ doorStatus }}
            </el-tag>
          </el-row>
        </el-col>
        <el-col :span="14">
          <el-row type="flex" justify="center" align="middle" class="my-passwordBox">
            {{ password }}
          </el-row>
          <el-row type="flex" justify="space-around" align="middle">
            <el-button-group>
              <el-button @click="eventDoorButton(7)">
                <i class="iconfont icon-shuzi7 my-shuzi" />
              </el-button>
              <el-button @click="eventDoorButton(8)">
                <i class="iconfont icon-shuzi8 my-shuzi" />
              </el-button>
              <el-button @click="eventDoorButton(9)">
                <i class="iconfont icon-shuzi9 my-shuzi" />
              </el-button>
            </el-button-group>
          </el-row>
          <el-row type="flex" justify="space-around" align="middle">
            <el-button-group>
              <el-button @click="eventDoorButton(4)">
                <i class="iconfont icon-shuzi4 my-shuzi" />
              </el-button>
              <el-button @click="eventDoorButton(5)">
                <i class="iconfont icon-shuzi5 my-shuzi" />
              </el-button>
              <el-button @click="eventDoorButton(6)">
                <i class="iconfont icon-shuzi6 my-shuzi" />
              </el-button>
            </el-button-group>
          </el-row>
          <el-row type="flex" justify="space-around" align="middle">
            <el-button-group>
              <el-button @click="eventDoorButton(1)">
                <i class="iconfont icon-shuzi1 my-shuzi" />
              </el-button>
              <el-button @click="eventDoorButton(2)">
                <i class="iconfont icon-shuzi2 my-shuzi" />
              </el-button>
              <el-button @click="eventDoorButton(3)">
                <i class="iconfont icon-shuzi3 my-shuzi" />
              </el-button>
            </el-button-group>
          </el-row>
          <el-row type="flex" justify="space-around" align="middle">
            <el-button-group>
              <el-button type="danger" icon="el-icon-back" class="my-shuzi" @click="eventDoorDelete"/>
              <el-button>
                <i class="iconfont icon-shuzi0 my-shuzi" @click="eventDoorButton(0)"/>
              </el-button>
              <el-button type="success" icon="el-icon-check" class="my-shuzi" @click="eventDoorEnter" :disabled="enterDisable"/>
            </el-button-group>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

import {
  openDoor,
  inputPassWord,
  delPassWord,
  changePassWord,
  closeDoor
} from "@/util/data/api-DoorControl"

export default {
  name: "DoorControl",
  data() {
    return {
      passwordBox: this.$store.state.doorControl.inputPassword,
      doorStatus: this.$store.state.doorControl.openStatus,
      delayClass: '',
      delayMs: null,
      indicatorClass: '',
      enterDisable: false,
      tagDisable: false,
      changeDisable: false,
      tagType: (this.doorStatus === '开启'?'success':'danger')
    }
  },
  computed: {
    delayMS() {
      return this.delayMs + ' ms'
    },
    password() {
      return this.passwordBox
    },
    heartBeat() {
      return this.$store.state.serverTime
    }
  },
  methods: {
    eventDoorButton(number) {
      this.indicatorClass = 'intermediary'
      const lastTime = new Date().getTime()
      inputPassWord({single_pass: ''+number}).then(res => {
        this.indicatorClass = 'positive'
        const { data } = res
        const password = data.password
        this.delayMs = Math.abs((data.time - lastTime).toFixed(2))
        this.$store.state.doorControl.inputPassword = password
      }).catch(() => {
        this.$store.state.doorControl.inputPassword = this.passwordBox
        this.indicatorClass = 'negative'
      })
    },
    eventDoorDelete() {
      this.indicatorClass = 'intermediary'
      const lastTime = new Date().getTime()
      delPassWord().then(res => {
        this.indicatorClass = 'positive'
        const { data } = res
        const password = data.password
        const time = data.time
        this.delayMs = Math.abs((time - lastTime).toFixed(2))
        this.$store.state.doorControl.inputPassword = password
      }).catch(() => {
        this.$store.state.doorControl.inputPassword = this.passwordBox
        this.indicatorClass = 'negative'
      })
    },
    eventDoorEnter() {
      this.enterDisable = true
      this.indicatorClass = 'intermediary'
      const that = this
      const lastTime = new Date().getTime()
      console.log(this.passwordBox)
      openDoor({password: this.passwordBox}).then(res => {
        that.indicatorClass = 'positive'
        that.enterDisable = false
        const { data } = res
        const status = data.status
        const time = data.time
        that.delayMs = Math.abs((time - lastTime).toFixed(2))
        that.$store.state.doorControl.inputPassword = ''
        that.$store.state.doorControl.openStatus = status
        that.$message({
          message: "门已经成功打开!",
          type: "success",
          duration: 3000
        })
      }).catch(error => {
        console.log(error.response)
        switch (error.response.status) {
          case 410:
            that.$message({
              message: error.response.data.detail,
              type: "error",
              duration: 3000
            })
            that.indicatorClass = 'positive'
            break
          case 422:
            this.$message({
              message: "密码长度必须是八位",
              type: "error",
              duration: 3000
            })
            that.indicatorClass = 'positive'
            break
          default:
            that.indicatorClass = 'negative'
        }
        that.enterDisable = false
      })
    },
    eventCloseDoor() {
      this.tagDisable = true
      this.indicatorClass = 'intermediary'
      const that = this
      const lastTime = new Date().getTime()
      closeDoor().then(res => {
        const { data } = res
        that.indicatorClass = 'positive'
        that.tagDisable = false
        const status = data.status
        const time = data.time
        that.delayMs = Math.abs((time - lastTime).toFixed(2))
        that.$store.state.doorControl.openStatus = status
      }).catch(() => {
        that.$store.state.doorControl.openStatus = this.doorStatus
        that.indicatorClass = 'negative'
        that.tagDisable = false
      })
    },
    eventChangePassWord() {
      this.$prompt("请输入要更改的密码", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9]{8}$/,
        inputErrorMessage: '密码格式不正确'
      }).then(({value}) => {
        const that = this
        this.changeDisable = true
        this.indicatorClass = 'intermediary'
        const lastTime = new Date().getTime()
        changePassWord({password: ''+value}).then(res => {
          const { data } = res
          that.indicatorClass = 'positive'
          that.changeDisable = false
          const time = data.time
          that.delayMs = Math.abs((time - lastTime).toFixed(2))
          this.$message({
            type: 'success',
            message: '修改成功,请记住你修改后的密码',
            duration: 3000
          })
        }).catch((error) => {
          this.$message({
            type: 'danger',
            message: `密码修改失败：${error.response.data.detail}`,
            duration: 3000
          })
          that.indicatorClass = 'negative'
          that.changeDisable = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改密码'
        })
      })
    }
  },
  watch: {
    delayMs(val) {
      if (val <= 150) {
        this.delayClass = 'my-iconfont-greet'
      } else if (val <= 300) {
        this.delayClass = 'my-iconfont-normal'
      } else {
        this.delayClass = 'my-iconfont-bad'
      }
    },
    heartBeat() {
      this.passwordBox = this.$store.state.doorControl.inputPassword
      this.doorStatus = this.$store.state.doorControl.openStatus
    },
    doorStatus(val) {
      if (val === '开启') {
        this.tagType = 'success'
      } else {
        this.tagType = 'danger'
      }
    }
  }
}
</script>

<style scoped>
.my-iconfont-text1 {
  font-size: 25px;
  text-align: center;
  vertical-align: middle;
  color: orangered;
}
.my-obj-icon {
  text-align: center;
  font-size: 140px;
}

.my-iconfont-no {
  font-size: 34px;
}
.my-iconfont-yes {
  font-size: 34px;
  color: #409EFF;
}

.my-iconfont-greet {
  color: #42b983;
}
.my-iconfont-normal {
  color: greenyellow;
}
.my-iconfont-bad {
  color: orangered;
}
.my-passwordBox {
  width: 100%;
  border: 2px solid #DCDFE6;
  border-radius: 5px;
  font-size: 20px;
  height: 30px;
}
.my-shuzi {
  font-size: 20px;
  /*border: 1px solid;*/
  text-align: center;
}
</style>
